<template>
	<div :class="classes">
		<slot></slot>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

import { createColClass, createTextColor, Grid } from '/@/lib/utils';
import { BreakPointEnum } from '/@/lib/enums';

export default defineComponent({
	name: 'HColumn',

	props: {
		cols: { type: [String, Number], default: '' },
		xs: { type: String, default: '' },
		sm: { type: String, default: '' },
		md: { type: String, default: '' },
		lg: { type: String, default: '' },
		xl: { type: String, default: '' },
		auto: { type: Boolean, default: false },
		color: { type: String, default: '' },
	},

	setup(props) {
		const classes = computed(() => {
			let result = [];

			if (props.auto) {
				result.push(createColClass(Grid.auto));
			} else {
				if (props.cols) {
					result.push(createColClass('', props.cols as string));
				} else {
					result.push(createColClass());

					if (props.xs) {
						result.push(createColClass(BreakPointEnum.xs, props.xs));
					}

					if (props.sm) {
						result.push(createColClass(BreakPointEnum.sm, props.sm));
					}

					if (props.md) {
						result.push(createColClass(BreakPointEnum.md, props.md));
					}

					if (props.lg) {
						result.push(createColClass(BreakPointEnum.lg, props.lg));
					}

					if (props.xl) {
						result.push(createColClass(BreakPointEnum.xl, props.xl));
					}
				}
			}

			if (props.color) {
				result.push(createTextColor(props.color));
			}
			return result;
		});

		return { classes };
	},
});
</script>
